<html>

<head>
    <meta charset="UTF-8">
    <title>添加-ZK</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/x-admin/css/font.css">
    <link rel="stylesheet" href="/x-admin/css/xadmin.css">
    <link rel="stylesheet" href="/x-admin/lib/layui/css/modules/layer/default/layer.css">

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/x-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/x-admin/lib/layui/lay/modules/layer.js" charset="utf-8"></script>
    <script type="text/javascript" src="/x-admin/js/xadmin.js"></script>


    <script type="text/javascript" src="/x-admin/js/vue.js"></script>
    <script type="text/javascript" src="/x-admin/js/axios.js"></script>
    <script type="text/javascript" src="/x-admin/js/common.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.2.2/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui@2.2.2/lib/index.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="/page/welcome">起始页</a>
            <a href="/zookeeper/page/list"><cite>ZK</cite></a>
        </span>

    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:window.location.reload();" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i>
    </a>
</div>

<div class="x-body">

    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content bg-purple-dark">
                <el-tree
                        :data="dataModel"
                        node-key="label"
                        lazy
                        @node-click="detail"
                        :load="load">
                    <el-tooltip class="item" effect="dark" :content="data.path" placement="right" open-delay="1000"
                                slot-scope="{ node, data }">
                        <span>
                            <span style="width: 180px;overflow: hidden">{{data.label}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="el-icon-circle-plus-outline"
                                  @click="nodeModel.id=data.id;nodeModel.path=data.path;nodeDialog=true"></span> &nbsp;&nbsp;
                            <span class="el-icon-remove-outline" @click="remove(data)"></span>
                        </span>
                    </el-tooltip>
                </el-tree>
            </div>
        </el-col>
        <el-col :span="20">
            <el-form ref="form" label-width="160px">
                <el-form-item :label="key" v-for=" (value,key) in detailMap">
                    <el-input v-model="detailMap[key]" :disabled="key!='data'"></el-input>
                </el-form-item>
                <el-form-item v-if="detailMap.pzxid">
                    <el-button type="primary" @click="setData(detailMap)">设置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

    <el-dialog title="新增节点" :visible.sync="nodeDialog">
        <el-form label-width="80px">
            <el-form-item label="zkId">
                <el-input v-model="nodeModel.id"></el-input>
            </el-form-item>
            <el-form-item label="父级目录">
                <el-input v-model="nodeModel.path"></el-input>
            </el-form-item>

            <el-form-item label="节点类型">
                <el-select v-model="nodeModel.type" placeholder="请选择">
                    <el-option label="持久节点" value="0"></el-option>
                    <el-option label="持久自增节点" value="1"></el-option>
                    <el-option label="临时节点" value="2"></el-option>
                    <el-option label="临时自增节点" value="3"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="节点名称">
                <el-input v-model="nodeModel.name"></el-input>
            </el-form-item>
            <el-form-item label="节点数据">
                <el-input v-model="nodeModel.data"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="nodeDialog = false">取 消</el-button>
            <el-button type="primary" @click="create">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    //axios http库
    var instance = axios.create({
        baseURL: "",
        timeout: 5000
    });

    //axios response interceptor
    instance.interceptors.response.use(function (res) {
        console.log(res)
        if (res && res.data && res.data.code === 200 || res.data.code === 0)
            return res;
        else {
            layer.msg("请求异常" + res.data.msg);
            return Promise.reject(res.data);
        }
        return res;
    }, function (error) {
        layer.msg("网络处理异常")
        console.error("网络处理异常", error)
        return Promise.reject(error);
    })

    //set vue use axios
    Vue.prototype.$http = instance;

    //当前页面的处理模式
    var add = true


    $(function () {
        var vue = new Vue({
            el: '.x-body',
            data: {
                dataModel: [{id: 0, isLeaf: false}],
                detailMap: {},
                nodeDialog: false,
                nodeModel: {}
            },
            methods: {
                back: function () {
                    history.back();
                },
                load: function (node, resolve) {
                    if (node.id == 0) {
                        resolve([{id: 1, isLeaf: false, label: "/", path: "/"}])
                    } else {
                        this.$http.get("/zookeeper/data?path=" + node.data.path + "&id=" + getParam("id")).then(function (data) {
                            resolve(data.data.data);
                        })
                    }
                },
                detail: function (data) {
                    var thiz = this;
                    this.$http.get("/zookeeper/detail?path=" + data.path + "&id=" + getParam("id")).then(function (data) {
                        thiz.detailMap = data.data.data;
                    })
                },
                setData: function (detailMap) {
                    var thiz = this;
                    this.$http.get("/zookeeper/set?path=" + detailMap.path + "&id=" + getParam("id") + "&data=" + detailMap.data).then(function (data) {
                        if (data.data.data) {
                            layer.msg("更新数据成功！");
                            thiz.detail(detailMap);
                        } else {
                            layer.msg("更新数据失败！");
                        }
                    })
                },
                create: function () {
                    var thiz = this;
                    this.$http.get("/zookeeper/create?path=" + thiz.nodeModel.path + "&id=" + getParam("id") + "&data=" + thiz.nodeModel.data + "&name=" + thiz.nodeModel.name + "&type=" + thiz.nodeModel.type).then(function (data) {
                        if (data.data.data) {
                            layer.msg("节点创建成功！");
                            window.location.reload()
                        } else {
                            layer.msg("节点创建失败！");
                        }
                    })
                },
                remove: function (model) {
                    this.$http.get("/zookeeper/remove?path=" + model.path + "&id=" + getParam("id")).then(function (data) {
                        if (data.data.data) {
                            layer.msg("节点删除成功！");
                            window.location.reload()
                        } else {
                            layer.msg("节点删除失败！");
                        }
                    })
                }
            },
            created: function () {
                (console.log("当前处理增加操作！"))
            }
        });
    });
</script>

</body>

</html>